<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片窗口 -->
    <el-card>
      <el-alert
        title="只允许修改第三级别的数据"
        type="warning"
        :closable='false'
      >
      </el-alert>
      <span>选择商品分类:</span>
      <!-- 分级选择器区域 -->
      <el-cascader
        v-model="testValue"
        :options="parParentOptions"
        :props="paramsProps"
        @change="handleParchanged"
        clearable
      ></el-cascader>

      <!-- Tabs切换显示界面 -->
      <el-tabs
        v-model="activeName"
        @tab-click="tabsChange"
      >
        <!-- 添加动态参数 -->
        <el-tab-pane
          label="动态参数"
          name="many"
        >
          <el-button
            type="primary"
            :disabled="showBtn"
            @click='addAttrDialogShow'
          >添加参数</el-button>
          <!-- 动态参数表格 -->
          <el-table
            :data="manyData"
            border
            stripe
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="editAttr(scope.row.attr_id)"
                >修改</el-button>
                <el-button
                  type="danger"
                  @click="deleteAttrShow(scope.row.attr_id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 添加静态属性 -->
        <el-tab-pane
          label="静态属性"
          name="only"
        >
          <el-button
            type="primary"
            :disabled="showBtn"
            @click='addAttrDialogShow'
          >添加属性</el-button>
          <!-- 静态参数表格 -->
          <el-table
            :data="onlyData"
            border
            stripe
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button
                  type="primary"
                  disabled
                >修改</el-button>
                <el-button
                  type="danger"
                  disabled
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 添加参数弹窗区域 -->
      <el-dialog
        :title="'添加'+isMany"
        :visible.sync="addAttrDialogVisible"
        width="50%"
        @close="changeAddAttrDialogVisibleClose"
      >
        <el-form
          :model="addAttrForm"
          :rules="addAttrFormRules"
          ref="addAttrFormRef"
          label-width="11%"
        >
          <el-form-item
            label="参数名称"
            prop="attr_name"
          >
            <el-input v-model="addAttrForm.attr_name"></el-input>
          </el-form-item>

        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="addAttrDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addAttrInfo"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 编辑参数区域 -->
      <el-dialog
        :title="'编辑'+isMany"
        :visible.sync="editAttrDialogVisible"
        width="50%"
        @close="changeEditAttrDialogVisibleClose"
      >
        <el-form
          :model="editAttrForm"
          :rules="addAttrFormRules"
          ref="editAttrFormRef"
          label-width="11%"
        >
          <el-form-item
            label="参数名称"
            prop="attr_name"
          >
            <el-input v-model="editAttrForm.attr_name"></el-input>
          </el-form-item>

        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="editAttrDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="editAttrInfo"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除确认弹窗 -->
      <el-dialog
        title="确定要删除该参数吗？"
        :visible.sync="delAttrDialogVisible"
        width="50%"
      >
        <span>确认删除吗？</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="delAttrDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="deleteAttr"
          >确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      testValue: [],
      parParentOptions: [],
      paramsProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      manyData: [],
      onlyData: [],
      activeName: 'many',
      addAttrDialogVisible: false,
      addAttrForm: {
        attr_name: '' // 参数名称
      }, // 添加参数表单
      addAttrFormRules: {
        attr_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }, // 添加参数表单规则
      editAttrDialogVisible: false, // 编辑参数弹窗开关
      editAttrForm: {
        attr_name: '' // 参数名称
      },
      attrid: 0, // 参数ID
      delAttrDialogVisible: false // 删除确认弹窗开关
    }
  },
  created () {
    this.getParParentList()
  },
  methods: {
    // 获取父级分类数据
    async getParParentList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 3 } })
      if (res.meta.status !== 200) return this.$message.error('获取父级分类失败')
      // console.log(res)
      this.parParentOptions = res.data
    },
    // 监听选择器变化
    handleParchanged () {
      if (this.testValue.length !== 3) {
        this.testValue = []
      }
      this.tabsChange()
    },
    // 监听tabs切换事件
    async tabsChange () {
      const { data: res } = await this.$http.get(`categories/${this.cateID}/attributes`, { params: { sel: this.activeName } })
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.$message.success('获取成功')
      if (this.activeName === 'many') { this.manyData = res.data }
      this.onlyData = res.data
    },
    // 点击添加参数按钮弹出添加函数弹窗
    addAttrDialogShow () {
      this.addAttrDialogVisible = true
    },
    // 监听添加参数弹窗关闭
    changeAddAttrDialogVisibleClose () {
      this.addAttrForm.attr_name = '' // 清空本地数据
    },
    // 在添加函数弹窗中点击确定按钮触发添加参数事件
    addAttrInfo () {
      this.$refs.addAttrFormRef.validate(async valid => {
        if (!valid) { return this.$message.error('格式错误') }
        const { data: res } = await this.$http.post(`categories/${this.cateID}/attributes`, {
          attr_name: this.addAttrForm.attr_name,
          attr_sel: this.activeName
        })
        if (res.meta.status !== 201) return this.$message.error('参数添加失败')
        this.$message.success('参数添加成功')
        this.addAttrForm.attr_name = '' // 清空本地数据
        this.addAttrDialogVisible = false // 关闭添加函数弹窗
        this.tabsChange() // 刷新页面数据
      })
    },
    // 点击修改按钮弹出修改参数弹窗并且获取需要修改的参数名称
    async editAttr (id) {
      this.editAttrDialogVisible = true
      const { data: res } = await this.$http.get(`categories/${this.cateID}/attributes/${id}`, {
        params: {
          attr_sel: this.activeName
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取参数失败')
      this.editAttrForm = res.data
    },
    // 修改弹窗关闭时清空本地数据
    changeEditAttrDialogVisibleClose () { },
    // 点击确定按钮提交编辑完的参数
    async editAttrInfo () {
      const { data: res } = await this.$http.put(`categories/${this.editAttrForm.cat_id}/attributes/${this.editAttrForm.attr_id}`, this.editAttrForm)
      if (res.meta.status !== 200) { return this.$message.error('提交失败') }
      this.editAttrDialogVisible = false
      this.tabsChange()
    },
    // 点击删除按钮弹出删除确认框

    deleteAttrShow (id) {
      this.delAttrDialogVisible = true
      this.attrid = id
      console.log(this.attrid)
    },
    // 点击确认按钮删除
    async deleteAttr () {
      const { data: res } = await this.$http.delete(`categories/${this.cateID}/attributes/${this.attrid}`)
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.attrid = 0
      this.delAttrDialogVisible = false
      this.tabsChange()
    }

  },
  computed: {
    showBtn () {
      if (this.testValue.length === 3) { return false }
      return true
    },
    cateID () {
      if (this.testValue.length === 3) { return this.testValue[2] }
      return null
    },
    // 点击添加参数按钮时先监听需要打开什么参数
    isMany () {
      if (this.activeName === 'many') {
        return '动态参数'
      }
      return '静态参数'
    }
  }
}
</script>

<style scoped>
.el-card {
  margin-top: 15px;
}
.el-cascader {
  margin-top: 15px;
  padding-left: 10px;
}
/* /deep/ .el-form-item__label {
  font-size: 12px !important;
} */
</style>
      const { data: res } = await this.$http.delete(`categories/${this.cateID}/attributes/${id}`)
      console.log(res)
